<template>
  <div class="content" style="border-radius: 5px">
    <div v-if="imagePosition === 'left'" class="left-image-right-content ">
      <div class="image-box" >
        <img :src="image" alt="Hanfu Image" />
      </div>
      <div class="content-box">
        <h2>{{ title }}</h2>
        <p class="first-line-indent">{{ content }}</p>
        <span>{{ category }}</span>
      </div>
    </div>
    <div v-else class="right-image-left-content">
      <div class="content-box">
        <h2>{{ title }}</h2>
        <p class="first-line-indent">{{ content }}</p>
        <span>{{ category }}</span>
      </div>
      <div class="image-box">
        <img :src="image" alt="Hanfu Image" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HanfuInfo',
  props: {
    title: {
      type: String,
      required: true,
    },
    content: {
      type: String,
      required: true,
    },
    category: {
      type: String,
      required: true,
    },
    image: {
      type: String,
      required: true,
    },
    imagePosition: {
      type: String,
      required: true,
      validator: value => ['left', 'right'].includes(value),
    },
   /* bgColor: {
      type: String,
      default: '#f3dbee',
    },*/
  },
};
</script>

<style scoped>
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
p.first-line-indent::first-line {
  padding-left: 10ch; /* 在第一行开头前空两个字符 */

}
p{
  margin-top: 30px;
}
.left-image-right-content,
.right-image-left-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 20px; /* 间距 */
}

.image-box,
.content-box {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
p{
  text-align: left;
}
.image-box img {
  width: 200px;
  height: auto;
  display: block;
  border-radius: 8px;
}

.content-box h2 {
  margin-top: 0;
}

.content-box span {
  font-style: italic;
  color: #666666;
}
</style>
